<!--
    @author: crissy-月下闲人
-->

<script lang="ts">
export default {
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      slides: [
        { image: '../static/img/1.jpg' },
        { image: '../static/img/1.jpg' },
        { image: '../static/img/1.jpg' },
      ],
    }
  },
  // methods: {
  //     changeIndicatorDots(e: MouseEvent) {
  //         this.indicatorDots = !this.indicatorDots
  //     },
  //     changeAutoplay(e: MouseEvent) {
  //         this.autoplay = !this.autoplay
  //     },
  //     intervalChange(e: any) {
  //         this.interval = e.target?.value
  //     },
  //     durationChange(e: any) {
  //         this.duration = e.target?.value
  //     }
  // }
}
</script>

<template>
  <view class="uni-margin-wrap">
    <swiper
      class="swiper"
      circular
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
    >
      <swiper-item v-for="(slide, index) in slides" :key="index">
        <image :src="slide.image" />
      </swiper-item>
    </swiper>
  </view>
</template>

<style scoped>
.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}
.swiper {
  height: 300rpx;
}
.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
}
.swiper-list {
  margin-top: 40rpx;
  margin-bottom: 0;
}
.uni-common-mt {
  margin-top: 60rpx;
  position: relative;
}
.info {
  position: absolute;
  right: 20rpx;
}
.uni-padding-wrap {
  width: 550rpx;
  padding: 0 100rpx;
}
</style>
